<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" >
  <head>  
    <title>Solr Spatial Playground</title>    
    
    <link rel="stylesheet" href="/openlayers/theme/default/style.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script src="/openlayers/OpenLayers.js"></script>
    <script type="text/javascript">

    var map, drawControls, wkt, featureLayer;
    
    addedWKT = function(feature)
    {
      featureLayer.removeAllFeatures();
      featureLayer.addFeatures( [feature] );
      
      //do something with polygon
      $('#geo').val( wkt.write( feature, true ) );
    };
    
    
    addedPoint = function(feature)
    {
      featureLayer.removeAllFeatures();
      featureLayer.addFeatures( [feature] );
      
      //do something with polygon
      $('#geo').val( feature.geometry.x + " " + feature.geometry.y );
    };
    
    addedBBox = function(feature)
    {
      featureLayer.removeAllFeatures();
      featureLayer.addFeatures( [feature] );
      
      var box = feature.geometry.bounds;
      $('#geo').val( box.toBBOX().replace( /,/g, ' ' ) );
    };
    
    addedCircle = function(feature)
    {
      featureLayer.removeAllFeatures();
      featureLayer.addFeatures( [feature] );
      
      var box = feature.geometry.bounds;
      
      var ccc = box.getCenterLonLat();
      var ppp = new OpenLayers.Geometry.Point( ccc.lon, ccc.lat );
      var dist = ppp.distanceTo( feature.geometry );
      
      //do something with polygon
      $('#geo').val( "PointDistance("+ccc.lon+" "+ccc.lat+" d="+dist+")" );
    };

    function init(){
        map = new OpenLayers.Map('map');
        
        var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
            "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});

        featureLayer = new OpenLayers.Layer.Vector("Query");

        map.addLayers([wmsLayer, featureLayer]);
        map.addControl(new OpenLayers.Control.MousePosition());
        map.addControl(new OpenLayers.Control.LayerSwitcher());

        drawControls = {
            point: new OpenLayers.Control.DrawFeature(featureLayer, 
              OpenLayers.Handler.Point, {'featureAdded': addedPoint}),
            line: new OpenLayers.Control.DrawFeature(featureLayer,
              OpenLayers.Handler.Path, {'featureAdded': addedWKT} ),
            bbox: new OpenLayers.Control.DrawFeature(featureLayer,
                OpenLayers.Handler.RegularPolygon, {'featureAdded': addedBBox} ),
            circle: new OpenLayers.Control.DrawFeature(featureLayer,
              OpenLayers.Handler.RegularPolygon, {'featureAdded': addedCircle} ),
            polygon: new OpenLayers.Control.DrawFeature(featureLayer,
              OpenLayers.Handler.Polygon, {'featureAdded': addedWKT} )
        };
        drawControls['bbox'].handler.setOptions({sides: 4, irregular:true});
        drawControls['circle'].handler.setOptions({sides: 40});

        for(var key in drawControls) {
            map.addControl(drawControls[key]);
        }

        map.setCenter(new OpenLayers.LonLat(-98, 37), 3);

        document.getElementById('noneToggle').checked = true;
        
        wkt = new OpenLayers.Format.WKT({
          'internalProjection': map.baseLayer.projection,
          'externalProjection': new OpenLayers.Projection('EPSG:4326')
        });
    }

    function toggleControl(element) {
          for(key in drawControls) {
            var control = drawControls[key];
            if(element.value == key && element.checked) {
                control.activate();
            } else {
                control.deactivate();
            }
        }
    }
    </script>

  </head>  
  <body onload="init()">

  
  <div style="float:right">
   <a href="solr/select?q=*:*">[solr]</a>
   <a wicket:id="playground" href="#">[playground]</a>
  </div>
  
    <form wicket:id="search">
      
      <table>
       <tr>
        <td>Source</td>
        <td>Filter</td>
       </tr>
       <tr>
         <td>
         <select wicket:id="source">
             <option value="volvo">Geometry</option>
             <option value="saab">RTree</option>
             <option value="mercedes">BBox</option>
             <option value="audi">Point</option>
           </select>
         </td>
         <td colspan="3"><input wicket:id="fq" type="text"/></td>
        </tr>
      </table>
      <table>
      <tr>
        <td>Field</td>
        <td>Operation</td>
        <td>Geometry</td>
      </tr>

      <tr>
        <td>
          <select wicket:id="field">
            <option value="volvo">Geometry</option>
            <option value="saab">RTree</option>
            <option value="mercedes">BBox</option>
            <option value="audi">Point</option>
          </select>
        </td>
        <td>
          <select wicket:id="op">
            <option value="volvo">Within</option>
            <option value="saab">BBoxWithin</option>
            <option value="mercedes">Intersects</option>
            <option value="audi">...</option>
          </select>
        </td>
        <td><input id="geo" type="text" style="width:350px;" wicket:id="geo"/></td>
        
        <td><input wicket:id="submit" type="submit" value="search"/></td>
      </tr>
      </table>
    
      

      <table>
      <tr valign="top">
      <td><div id="map" style="width:512px; height:350px; border:1px solid #CCC;"></div></td>
      <td>
        <ul id="controlToggle" style="margin-left:5px; padding:0px;">
          <li>
              <input type="radio" name="type" value="none" id="noneToggle"
                     onclick="toggleControl(this);" checked="checked" />
              <label for="noneToggle">navigate</label>
          </li>
          <li>
              <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
              <label for="pointToggle">draw point</label>
          </li>
          <li>
            <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
            <label for="lineToggle">draw line</label>
          </li>
          <li>
              <input type="radio" name="type" value="bbox" id="bboxToggle" onclick="toggleControl(this);" />
              <label for="bboxToggle">draw bbox</label>
          </li>
          <li>
              <input type="radio" name="type" value="circle" id="circleToggle" onclick="toggleControl(this);" />
              <label for="circleToggle">draw circle</label>
          </li>
          <li>
              <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
              <label for="polygonToggle">draw polygon</label>
          </li>
        </ul>
        
        <div>
          <b>Min</b><br/>
          <input wicket:id="min" type="text" />
        </div>

        <div>
          <b>Max</b><br/>
          <input wicket:id="max" type="text" />
        </div>

        <br/>
        <div>
          <input wicket:id="score" type="checkbox" id="checkScore" />
          <label for="checkScore">Score</label> (not used right now)
        </div>
        <br/>
        <div>
          <b>Sort</b><br/>
          <input wicket:id="sort" type="text" />
        </div>

      </td>
      </tr>
      </table>
      
    </form>
    
    <div wicket:id="results">
    <a wicket:id="solr" href="#">[solr]</a><br/>
      <span wicket:id="count">A - B of C</span>
      <pre wicket:id="error">
        error log here...
      </pre>
      <ul>
        <li wicket:id="item">
          <span wicket:id="name">name</span>
          (<span wicket:id="source">source</span>)
          <span wicket:id="score">score</span>
          <a wicket:id="link" href="#">[detail]</a>
          <a wicket:id="kml" href="#">[KML]</a>
        </li>
      </ul>
    </div>
    
    
    <hr/>
    <div wicket:id="load">
      <a wicket:id="link">load...</a>
      <div wicket:id="status" style="border:1px solid #CCC; padding:10px; margin-bottom:50px;">
        <pre wicket:id="history"></pre>
        <div wicket:id="status">status</div>
        <br/>
      </div>
    </div>
    
  </body>
</html>
